<template>
  <div id="vocabulary-management">
    <Tabs type="card">
      <TabPane label="高频词汇管理"
               icon="md-settings">
        <div class="wrap">
          <div class="wrap-item whitelist">
            <div class="title">高频词汇白名单</div>
            <div class="subtitle">白名单中词汇将不被系统统计认定为高频词汇</div>
            <Card style="width:350px">
              <Input search
                     slot="title"
                     style="width:200px;"
                     enter-button
                     placeholder="" />
              <div slot="extra">
                <Button shape="circle"
                        @click="addOrUpdateHandle"
                        icon="md-add"></Button>
                <Button shape="circle"
                        @click="del"
                        icon="ios-trash"></Button>
              </div>

              <RadioGroup v-model="vertical"
                          vertical>
                <Radio label="apple">
                  <Icon type="social-apple"></Icon>
                  <span>Apple</span>
                </Radio>
                <Radio label="android">
                  <Icon type="social-android"></Icon>
                  <span>Android</span>
                </Radio>
                <Radio label="windows">
                  <Icon type="social-windows"></Icon>
                  <span>Windows</span>
                </Radio>
              </RadioGroup>
            </Card>
          </div>
          <div class="wrap-item threshold-setting">
            <div class="title">阀值设置</div>
            <div class="subtitle">词汇在”时间阀值“周期内出现次数高于”统计阀值“将被系统认定为高频词汇</div>
            <Form :model="formItem"
                  :label-width="150">
              <FormItem label="时间阀值（单位：分钟）">
                <Input v-model="formItem.time"
                       class="input-item"
                       placeholder=""></Input>
              </FormItem>
              <FormItem label="统计阀值（单位：次）">
                <Input v-model="formItem.count"
                       class="input-item"
                       placeholder=""></Input>
              </FormItem>
            </Form>
            <div class="btn-wrap">
              <Button type="primary"
                      @click="save">保存设置</Button>
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getUsersList"></add-or-update>
  </div>
</template>
<script>
import AddOrUpdate from './vocabulary-management-add'
import { getUsersList, removeUser } from '@/api/management.js'
export default {
  data () {
    return {
      vertical: "",
      addOrUpdateVisible: false,
      formItem: {
        time: '',
        count: ''
      }
    }
  },
  activated () {
    // this.getUsersList()
  },
  methods: {
    // 删除
    remove (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否对该用户进行删除操作</p>',
        loading: true,
        onOk: () => {
          removeUser(id).then(res => {
            if (res.data == 'success') {
              this.$Modal.remove()
              this.$Message.info('用户删除成功')
              this.getUsersList()
            }
          })
        }
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row)
      })
    },
    // 获取表格数据
    getUsersList () {
      const date = []
      // this.form.time.map(item => {
      //   if (item != '') {
      //     date.push(dateFormat(item))
      //   }
      // })
      this.dataListLoading = true
      const params = {
        // userId: this.userId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        loginName: this.form.loginName,
        roleId: this.form.roleId,
        no: this.form.no
      }
      getUsersList(params).then(({ data }) => {
        if (data.rows.length > 0) {
          this.data = data.rows
          this.totalPage = data.total
        } else {
          this.data = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 保存设置
    save () {

    },
    // 删除
    del () {

    }
  },
  watch: {},
  components: {
    AddOrUpdate
  }
}
</script>
<style lang="scss">
#vocabulary-management {
  width: 100%;
  height: 100%;
  .wrap {
    display: flex;
    .wrap-item {
      flex: 1;
      .title {
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        font-style: normal;
        color: #333333;
        line-height: normal;
      }
      .subtitle {
        line-height: 30px;
        height: 30px;
        margin-bottom: 20px;
      }
    }
    .threshold-setting {
      .input-item {
        width: 200px;
      }
      .btn-wrap {
        text-align: left;
      }
    }
  }
}
</style>
